
<!DOCTYPE html>
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	    <title>留言反馈列表</title>

        <!-- 所有的 css 资源 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 
		<link rel="stylesheet" href="../../static/sa.css"> 
		
		<!-- 所有的 js 资源 -->
		<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
		<script src="https://unpkg.com/element-ui@2.8.2/lib/index.js"></script>

		<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
		<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
		<script src="../../static/sa.js"></script>
		
        <style>
            
			.td-img{width: 12em; height: 6em; cursor: pointer; vertical-align: middle;}
            

        </style>
	
	</head>
	<body>
		<div class="vue-box">
			
			<!-- 表单部分 -->
			<div class="c-panel">
				<h4 class="c-title">检索参数</h4>
				<el-form ref="form" label-width="80px">
	
					<div class="c-item">
						<label class="c-label">标题：</label>
						<el-input size="mini" v-model="p.title" @keyup.enter="f5"></el-input>
					</div>
					
					<div class="c-item">
						<el-button type="primary" icon="el-icon-search" size="mini" @click="f5">查询</el-button>
					</div>

					<br />
					<div class="c-item">
						<label class="c-label">排序：</label>
						<el-radio-group v-model="p.sort_type">
							<el-radio :label="0">排序值</el-radio>
							<el-radio :label="1">创建时间</el-radio>
							<el-radio :label="2">点击量</el-radio>
						</el-radio-group>
					</div>
					
					
	
				</el-form>
			</div>
			
			<!-- 表格 -->
			<div class="c-panel c-table">
				<h4 class="c-title">列表<span>（鼠标悬即可出现输入框，修改完成后点击【修改】按钮进行保存）</span></h4>
	
				<el-table class="data-table" :data="dataList" size="mini">
					<el-table-column prop="id" label="编号" width="70px" > </el-table-column>
					<el-table-column label="图片" width="300px">
						<template slot-scope="scope">
							<img :src="scope.row.img_src" class="td-img" title="点击预览" @click="sa.$fast.showImage(scope.row.img_src)">
							<span style="color: #666; padding-left: 0.5em;"> 点击图片预览</span>
						</template>
					</el-table-column>
					<el-table-column label="标题">
						<template slot-scope="scope">
							<el-input size="mini" v-model="scope.row.title"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="排序">
						<template slot-scope="scope">
							<el-input size="mini" v-model="scope.row.sort"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="click_count" label="点击量" width="100px"> </el-table-column>
					<el-table-column label="状态" >
						<template slot-scope="scope">
							<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="scope.row.is_update=true"></el-switch>
							<span style="color: #999;" v-if="scope.row.status==1">显示</span>
							<span style="color: #999;" v-else>隐藏</span>
						</template>
					</el-table-column>
					<el-table-column label="创建时间" width="150px">
						<template slot-scope="scope">{{sa.$util.forDate(scope.row.create_time, 2)}}</template>
					</el-table-column>
					
					<el-table-column prop="address" label="操作">
						<template slot-scope="scope">
							<el-badge is-dot class="item" :is-dot="scope.row.is_update" style="margin: 5px 0;">
								<el-button type="primary" class="c-button" icon="el-icon-edit" @click="update(scope.row)">修改</el-button>
							</el-badge>
							<el-button type="danger" class="c-button" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
	
				<!-- 分页 -->
				<div class="page-box">
					<el-pagination background
						layout="total, prev, pager, next, sizes, jumper" 
						:current-page.sync="page.pageNo" 
						:page-size.sync="page.pageSize" 
						:total="page.count" 
						:page-sizes="[1, 10, 20, 30, 40, 50, 100]" 
						@current-change="f5(true)" 
						@size-change="f5(true)">
					</el-pagination>
				</div>
			</div>
			
			<br /><br /><br /><br />
			
			
			<!-- 添加一个 -->
			<div class="c-panel c-add-table">
				<h4 class="c-title">添加一个<span>（手机端按照排序值的大小从小到大进行前后排列）</span></h4>	
				<el-table class="data-table" :data="[{}]" size="mini" style="width: 100%">
					<el-table-column prop="id" label="编号" width="70px" >
						<template slot-scope="scope">{{addData.id}}</template>
					</el-table-column>
					<el-table-column label="图片" width="300px">
						<template slot-scope="scope">
							<img :src="addData.img_src" class="td-img" title="点击预览" @click="sa.$fast.showImage(addData.img_src, '70%', '80%')" >
							<span style="color: #666; padding-left: 0.5em;"> 点击图片预览</span>
						</template>
					</el-table-column>
					<el-table-column label="标题">
						<template slot-scope="scope">
							<el-input size="mini" v-model="addData.title"></el-input>
						</template>
					</el-table-column>
					<!-- <el-table-column label="跳转连接">
						<template slot-scope="scope">
							<el-input size="mini" v-model="addData.index"></el-input>
						</template>
					</el-table-column> -->
					<el-table-column label="排序">
						<template slot-scope="scope">
							<el-input size="mini" v-model="addData.sort"></el-input>
						</template>
					</el-table-column>
					<el-table-column label="状态">
						<template slot-scope="scope">
							<el-switch v-model="addData.status" :active-value="1" :inactive-value="2"></el-switch>
							<span style="color: #999;" v-if="addData.status==1">显示</span>
							<span style="color: #999;" v-else>隐藏</span>
						</template>
					</el-table-column>
					
					<el-table-column prop="address" label="操作">
						<template slot-scope="scope">
							<el-button type="primary" size="mini" style="border-radius: 0px;" icon="el-icon-plus" @click="add" >添加</el-button>
						</template>
					</el-table-column>
				</el-table>
				
			</div>
	

			
		</div>
		<!-- 模拟数据 -->
		<script src="swiper-list.js"></script>
        <script>

			var app = new Vue({
				el: '.vue-box',
				data: {
					sa: sa, 	// 超级对象
					p: {		// 查询参数
						sort_type: 0
					},
					page: {
						pageNo: 1,
						pageSize: 10,
						count: 100,
					},	// 分页信息
					dataList: [],	// 数据集合
					addData: {		// 添加信息
						id: 11, 
						title: '标题',
						type: 1, 
						sort: 0,
						status:1, 
						img_src: 'http://pic.rmb.bdstatic.com/5d1bf2db27cd808776a6bbcb9cfc68ac.jpeg',
						create_time: new Date(),
						click_count: 42
					},
					curr_m: null // 当前操作的 m 
				},
				methods: {
					// 刷新
					f5: function(){
						var pageStr = (this.page.pageNo == undefined ? '' : '?pageNo=' + this.page.pageNo + '&pageSize=' + this.page.pageSize);	// 拼接分页 
						sa.ajax2('/SysSwiper/getList' + pageStr, this.p, function(res){
							// this.dataList = sa.$util.listAU(res.data);	// 数据
							// this.page = res.page;		// 分页 
							this.dataList = dataList;
						}.bind(this));
					},
					// 保存
					add: function(){
		                sa.ajax2('/SysSwiper/add',this.addData,function(res){
		                    layer.alert('添加成功',{},function(){
		                        app.dataList.push(sa.$util.copyJSON(app.addData));
								layer.closeAll();
		                    });
		                })
					},
					// 修改
					update: function(data){
						var data2 = sa.$util.copyJSON(data);
						data2.create_time = undefined;
						sa.ajax2('/SysSwiper/update', data2, function(res){
							layer.msg('修改成功');
							data.is_update = false;
						})
					},
					// 删除
					del: function(data){
						layer.confirm('是否删除，此操作不可撤销',{},function(){
							sa.ajax2('/SysSwiper/delete',{id: data.id},function(res){
								layer.msg('删除成功');
								sa.$util.arrayDelete(this.dataList, data);
							}.bind(this))
						}.bind(this))
					}

				},
				created: function(){
					this.f5();
				}
			})
			
			
			// 监控.c-table input，改变值时有些变化
			$('.c-table').bind('input', function(){
				var i = $(document.activeElement).parents('tr').index();
				app.dataList[i].is_update = true;
			})


			
		
		</script>
	
</html>